<template>
  <div id="my-filter">
    <div class="left"
         tabindex="666"
         @keyup="pageKeyUp($event ,'left')"
         @mouseover="mouseoverDom('left')"
         @mousewheel="mousewheel($event,'left')">
      <el-form class="search-form demo-form-inline"
               :inline="true">
        <el-row>
          <el-form-item label="品牌:">
            <el-select size="small"
                       filterable
                       clearable
                       @change="leftBrandChange"
                       v-model="leftParams.brands">
              <el-option v-for="item in brandsArr"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系列:">
            <el-select size="small"
                       filterable
                       clearable
                       v-model="leftParams.models">
              <el-option v-for="item in leftModels"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="颜色:">
            <el-select size="small"
                       filterable
                       clearable
                       v-model="leftParams.colors">
              <el-option v-for="item in colorsArr"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px','margin-top': '6px' ,'backgroundColor': item.hex}"></span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input size="small"
                      class="desc"
                      v-model="leftParams.keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       size="small"
                       @click="search('new')">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small"
                       icon="el-icon-refresh"
                       type="primary"
                       @click="resetRightParams()"></el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table :data="leftData"
                highlight-current-row
                v-loading="newLoading"
                class="tableOne"
                ref="leftTable"
                border
                style="width: 100%"
                @current-change="handleCurrentChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-col :span="8">
                <el-form-item label="品牌:">
                  <span>{{props.row.brand.name }}</span>
                </el-form-item>

              </el-col>
              <el-col :span="8">
                <el-form-item label="品牌ID:">
                  <span>{{ props.row.brand.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品成色:">
                  <span>{{ props.row.condition.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品成色ID:">
                  <span>{{ props.row.condition.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="价格:">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="ID:">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品ID:">
                  <span>{{ props.row.product_id }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="商品类型::">
                  <span>{{ props.row.type }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品子类型::">
                  <span>{{ props.row.subtype }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="尺寸:">
                  <span>{{ props.row.size_text }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="描述::">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="品牌"
                         width="100">
          <template slot-scope="scope">
            {{scope.row.brand.name}}
          </template>
        </el-table-column>
        <el-table-column label="描述"
                         min-width="100">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column label="颜色"
                         width="100">
          <template slot-scope="scope">
            <span> {{scope.row.color.name}}</span>
            <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px' ,'backgroundColor': scope.row.color.hex}"></span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="类型:"
                         width="180">
          <template slot-scope="scope">
            {{scope.row.type + ' / ' + scope.row.subtype}}
          </template>
        </el-table-column> -->
        <el-table-column label="图片"
                         width="360">
          <template slot-scope="scope">
            <div class="table-img-wrap"
                 @click="imageClick(scope.row, scope.$index,$event, 'left')">
              <span v-for="(img,index) in scope.row.imgs"
                    :key="img.img"
                    v-if="img.show">
                <div class="img-wrap">
                  <img :src="img.img"
                       :index="index"
                       alt="">
                </div>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="250">
          <template slot-scope="scope">
            <el-checkbox size="medium"
                         style="margin-right: 10px;"
                         v-model="scope.row.checked">匹配</el-checkbox>
            <el-button size="small"
                       icon="el-icon-search"
                       type="primary"
                       @click="singleSearch(scope.row)"></el-button>
            <!-- <el-button size="small"
                       icon="el-icon-d-arrow-right"
                       type="primary"
                       @click="byPass([scope.row.id])"></el-button> -->
            <el-button size="small"
                       icon="el-icon-delete"
                       type="primary"
                       @click="deleteLeftData(scope.row.id,scope.$index)"></el-button>
            <el-button size="small"
                       icon="el-icon-edit"
                       type="primary"
                       @click="editData(scope.row, scope.$index ,'left')"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-bar">
        <div class="buttons">
          <el-button size="large"
                     class="no-match"
                     @click="clearRemain">本页剩余不匹配</el-button>
          <el-button type="primary"
                     icon="el-icon-menu"
                     circle
                     @click="setDialogVisible = true"></el-button>
        </div>
        <el-pagination small
                       layout="prev, next, jumper,total"
                       @current-change="leftCurrentChange"
                       @size-change="leftSizeChange"
                       :current-page.sync="leftPage.page"
                       :page-size="leftPage.pageSize"
                       :total="leftPage.total">
        </el-pagination>
      </div>
      <div class="left-img-dialog"
           tabindex="2"
           @mouseover="mouseoverDom('leftImage')"
           @keyup="imgDialogKeyUp($event,'left')"
           @click="imgDialogEsc('left')"
           v-show="leftImgDialog">
        <div class="top-bar">
          <div class="counter">{{leftCurrentImageIndex}} / {{leftTotalImageCount}}</div>
          <div class="name">图片</div>
          <div class="right-button">
            <i class="el-icon-close"
               @click="leftImgDialog = false"></i>
          </div>
        </div>
        <div class="img">
          <!-- <i class="el-icon-arrow-left"
             @click="previousImage('left')"></i> -->
          <div class="img"
               :style="{'background-image': `url(${leftCurrentImage})`}"></div>
          <!-- <img :src="leftCurrentImage"
               alt=""> -->
          <!-- <i class="el-icon-arrow-right"
             @click="nextImage('left')"></i> -->
        </div>
      </div>
    </div>
    <div class="right"
         tabindex="777"
         @keyup="pageKeyUp($event ,'right')"
         @mouseover="mouseoverDom('right')"
         @mousewheel="mousewheel($event,'right')">
      <el-form class="search-form demo-form-inline"
               :inline="true">
        <el-row>
          <el-form-item label="品牌:">
            <el-select size="small"
                       filterable
                       clearable
                       @change="rightBrandChange"
                       v-model="rightParams.brands">
              <el-option v-for="item in brandsArr"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="颜色(父):">
            <el-select size="small"
                       @change="rightColorChange"
                       filterable
                       clearable
                       multiple
                       collapse-tags
                       v-model="rightParams.colors">
              <el-option v-for="item in colorsArr"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px','margin-top': '6px' ,'backgroundColor': item.hex}"></span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质(父):">
            <el-select size="small"
                       @change="rightMaterialChange"
                       filterable
                       clearable
                       multiple
                       collapse-tags
                       v-model="rightParams.materials">
              <el-option v-for="item in rightMaterials"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="类型:">
            <el-select class="type"
                       size="small"
                       filterable
                       multiple
                       collapse-tags
                       v-model="rightParams.types">
              <el-option v-for="item in rightTypes"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
        </el-row>
        <el-row>
          <el-form-item label="系列:">
            <el-select size="small"
                       filterable
                       clearable
                       v-model="rightParams.models">
              <el-option v-for="item in rightModels"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="颜色(子):">
            <el-select size="small"
                       filterable
                       multiple
                       collapse-tags
                       v-model="rightParams.subcolors">
              <el-option-group v-for="group in rightSubColors"
                               :key="group.id"
                               :label="group.name">
                <el-option v-for="item in group.colors"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px','margin-top': '6px' ,'backgroundColor': item.hex}"></span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="材质(子):">
            <el-select size="small"
                       filterable
                       multiple
                       collapse-tags
                       v-model="rightParams.submaterials">
              <el-option-group v-for="group in rightSubMaterials"
                               :key="group.id"
                               :label="group.name">
                <el-option v-for="item in group.materials"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input size="small"
                      class="desc"
                      v-model="rightParams.keyword"></el-input>

          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       size="small"
                       @click="search('old')">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small"
                       icon="el-icon-refresh"
                       type="primary"
                       @click="resetRightParams()"></el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table :data="rightData"
                v-loading="rightLoading"
                ref="rightTable"
                highlight-current-row
                border
                style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-col :span="8">
                <el-form-item label="品牌:">
                  <span>{{ props.row.brand.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="品牌ID:">
                  <span>{{props.row.brand_id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="颜色:">
                  <span>{{ props.row.color.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="颜色ID:">
                  <span>{{ props.row.color.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="ID:">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品ID:">
                  <span>{{ props.row.goods_id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品信息ID:">
                  <span>{{ props.row.goods_info_id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="材质:">
                  <span>{{ props.row.material.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="价格:">
                  <span>$ {{ props.row.price }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品类型::">
                  <span>{{ props.row.type }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="尺寸:">
                  <span>{{ props.row.size_text }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="品牌"
                         min-width="100">
          <template slot-scope="scope">
            {{scope.row.brand.name}}
          </template>
        </el-table-column>
        <el-table-column label="系列"
                         width="100">
          <template slot-scope="scope">
            {{scope.row.model.name}}
          </template>
        </el-table-column>
        <el-table-column label="材质"
                         min-width="100">
          <template slot-scope="scope">
            {{scope.row.material.name}}
          </template>
        </el-table-column>
        <el-table-column label="颜色"
                         min-width="100">
          <template slot-scope="scope">
            <span> {{scope.row.color.name}}</span>
            <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px' ,'backgroundColor': scope.row.color.hex}"></span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="类型:"
                         width="110">
          <template slot-scope="scope">
            {{scope.row.type}}
          </template>
        </el-table-column> -->
        <el-table-column label="图片"
                         width="460">
          <template slot-scope="scope">
            <div @click="imageClick(scope.row, scope.$index, $event, 'right')"
                 class="table-img-wrap">
              <span v-for="(img,index) in scope.row.imgs"
                    v-if="img.show"
                    :key="img.img">
                <div class="img-wrap">
                  <img :src="img.img"
                       :index="index"
                       draggable="false"
                       alt="">
                </div>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="150"
                         style="text-align: center">
          <template slot-scope="scope">
            <!-- <el-button size="small"
                       @click="combine(scope.row)">合并</el-button> -->
            <el-button size="small"
                       icon="el-icon-back"
                       type="primary"
                       @click="coverToLeft(scope.row)"></el-button>
            <el-button size="small"
                       icon="el-icon-edit"
                       type="primary"
                       @click="editData(scope.row, scope.$index,'right')"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-bar">
        <!-- <div class="msg">
          <span>今天已合并: {{ combineNum }}</span>
          <span>今天已跳过: {{ skipNum }}</span>
        </div> -->
        <el-pagination small
                       layout="prev, next, jumper,total"
                       :current-page.sync="rightPage.page"
                       :page-size="rightPage.pageSize"
                       @size-change="rightSizeChange"
                       @current-change="rightCurrentChange"
                       :total="rightPage.total">
        </el-pagination>
      </div>
      <div class="right-img-dialog"
           tabindex="2"
           @mouseover="mouseoverDom('rightImage')"
           @keyup="imgDialogKeyUp($event,'right')"
           @click="imgDialogEsc('right')"
           v-show="rightImgDialog">
        <div class="top-bar">
          <div class="counter">{{rightCurrentImageIndex}} / {{rightTotalImageCount}}</div>
          <div class="name">图片</div>
          <div class="right-button">
            <i class="el-icon-close"
               @click="rightImgDialog = false"></i>
          </div>
        </div>
        <div class="img">
          <!-- <i class="el-icon-arrow-left"
             @click="previousImage('right')"></i>
          <img :src="rightCurrentImage"
               alt=""> -->
          <div class="img"
               :style="{'background-image': `url(${rightCurrentImage})`}"></div>
          <!-- <i class="el-icon-arrow-right"
             @click="nextImage('right')"></i> -->
        </div>
      </div>
    </div>
    <div class="img-dialog"
         @mousewheel="mousewheel($event)"
         tabindex="1"
         @keyup="imgDialogKeyUp"
         @click="imgDialogEsc('')"
         v-show="imgDialog">
      <div class="top-bar">
        <div class="counter">{{currentImageIndex}} / {{totalImageCount}}</div>
        <div class="name">图片</div>
        <div class="right-button">
          <i class="el-icon-close"
             @click="imgDialog = false"></i>
        </div>
      </div>
      <div class="img">
        <i class="el-icon-arrow-left"
           @click="previousImage"></i>
        <img :src="currentImage"
             alt="">
        <i class="el-icon-arrow-right"
           @click="nextImage"></i>
      </div>
    </div>
    <el-dialog :title="dialogTitle"
               :visible.sync="changeDialogVisible"
               width="20%"
               @close="handleClose">
      <el-form :inline="true"
               label-width="120"
               class="demo-form-inline">
        <el-form-item label="品牌:">
          <el-select size="small"
                     filterable
                     clearable
                     @change="dialogBrandChange"
                     v-model="currentRow.brand">
            <el-option v-for="item in brandsArr"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系列:">
          <el-select size="small"
                     filterable
                     clearable
                     v-model="currentRow.model">
            <el-option v-for="item in dialogModels"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色:">
          <el-select size="small"
                     filterable
                     v-model="currentRow.color">
            <el-option-group v-for="group in colorsArr"
                             :key="group.id"
                             :label="group.name">
              <el-option v-for="item in group.colors"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span :style="{'float': 'right','display': 'block', 'width': '20px', 'height': '20px','margin-top': '6px' ,'backgroundColor': item.hex}"></span>
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="材质:">
          <el-select size="small"
                     filterable
                     v-model="currentRow.material">
            <el-option-group v-for="group in rightMaterials"
                             :key="group.id"
                             :label="group.name">
              <el-option v-for="item in group.materials"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="类型:">
          <el-select size="small"
                     filterable
                     v-model="currentRow.type">
            <el-option v-for="item in rightTypes"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelEdit()">取 消</el-button>
        <el-button type="primary"
                   @click="remainEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置"
               :visible.sync="setDialogVisible"
               class="set-dialog"
               width="20%">
      <el-row>
        <el-col :span="24">
          <span class="set-name">半屏模式</span>
          <el-switch @change="halfModeChange"
                     v-model="halfMode">
          </el-switch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="set-name">自动选择</span>
          <el-switch v-model="autoSelect"
                     @change="autoSelectChange">
          </el-switch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"
                class="radio-row">
          <el-radio-group v-model="metaStatus"
                          @change="metaStatusChange">
            <el-radio :label="0">未分类</el-radio>
            <el-radio :label="1">已分类</el-radio>
            <el-radio :label="2">跳过</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="setDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { formatTime } from "../util/util";

interface Page {
  pageSize: number;
  page: number;
  total: number;
}

interface Color {
  id: number;
  name: string;
  hex: string;
  colors?: Array<any>;
}

interface Filter {
  brands: number;
  models: number;
  keyword?: string;
  colors: number[] | number;
  materials?: number[];
  types?: number[];
  subcolors?: number[];
  submaterials?: number[];
}

@Component({})
export default class LuxFilter extends Vue {
  dialogModels = [];
  user: string;
  dialogTitle: string = "修改";
  changeDialogVisible = false;
  setDialogVisible = false;
  imgDialog = false;
  leftImgDialog = false;
  rightImgDialog = false;
  newLoading = false;
  rightLoading = false;
  mouseLock = true;
  autoSelect = false;
  halfMode = true;
  metaStatus = 0;
  imgUrl = "http://productdb.luxsens.com/biapi/images/";
  rightImgUrl = "http://productdb.luxsens.com/biapi/images/";
  leftData = [];
  leftModels = [];
  rightData = [];
  brandsArr = [];
  rightModels = [];
  colorsArr: Color[] = [];
  rightSubColors = [];
  rightAllSubColors = [];
  rightAllSubMaterials = [];
  rightSubMaterials = [];
  rightMaterials = [];
  rightTypes = [];
  combineMsg: string;
  skipMsg: string;
  combineNum: number = 0;
  skipNum: number = 0;
  leftParams: Filter = {
    brands: null,
    models: null,
    colors: null,
    keyword: ""
  };
  rightParams: Filter = {
    brands: null,
    models: null,
    colors: [],
    subcolors: [],
    materials: [],
    submaterials: [],
    types: [],
    keyword: ""
  };
  leftPage: Page = {
    pageSize: 30,
    page: 1,
    total: 0
  };
  rightPage: Page = {
    pageSize: 30,
    page: 1,
    total: 0
  };
  current = {};
  currentImage = "";
  leftCurrentImage = "";
  rightCurrentImage = "";
  currentImageIndex = 3;
  leftCurrentImageIndex = 3;
  rightCurrentImageIndex = 3;
  totalImage = [];
  leftTotalImage = [];
  rightTotalImage = [];
  totalImageCount = 3;
  leftTotalImageCount = 3;
  rightTotalImageCount = 3;
  timeout: any = null;
  title = "";
  currentRow: any = {};
  currentRowCache = {};
  leftIndex: number;
  rightIndex: number;
  editPos: string;
  editIndex: number;

  // hooks
  created(): void {
    this.user = this.$route.params.user;
    const day = formatTime(new Date(), "yyyy-MM-dd");
    this.combineMsg = "lux-combine-number:" + day;
    this.skipMsg = "lux-skip-number:" + day;
    const combineNum = localStorage.getItem(this.combineMsg);
    const skipNum = localStorage.getItem(this.skipMsg);
    if (combineNum) {
      this.combineNum = +combineNum;
    }
    if (skipNum) {
      this.skipNum = +skipNum;
    }
    this.getLocalStorage();
    this.getRightSelectData();
    this.getLeftSelectData();
    setTimeout(() => {
      this.getLeftData();
    }, 100);
  }

  byPass(ids: number[]): void {
    this.$http.post("goods_bypass", { ids: ids, user: this.user }).then(
      res => {
        let len = ids.length;
        this.skipNum += len;
        localStorage.setItem(this.skipMsg, this.skipNum.toString());
        this.$message.success("成功!");
        this.leftData = this.leftData.filter(item => !ids.includes(item.id));
        if (!this.leftData.length) {
          this.getLeftData();
        }
      },
      err => {}
    );
  }

  getLocalStorage() {
    let halfMode = localStorage.getItem("lux-filter-half-mode");
    let autoSelect = localStorage.getItem("lux-filter-auto-select");
    let metaStatus = localStorage.getItem("lux-filter-meta-status");
    if (metaStatus) {
      this.metaStatus = +metaStatus;
    }
    halfMode === "0" ? (this.halfMode = false) : (this.halfMode = true);
    autoSelect === "1" ? (this.autoSelect = true) : (this.autoSelect = false);
  }

  halfModeChange(val): void {
    if (!val) {
      localStorage.setItem("lux-filter-half-mode", "0");
    } else {
      localStorage.setItem("lux-filter-half-mode", "1");
    }
    if (!val) {
      if (this.rightCurrentImage) {
        this.currentImage = this.rightCurrentImage;
        this.currentImageIndex = this.rightCurrentImageIndex;
        this.totalImage = this.rightTotalImage.map(item => item);
        this.totalImageCount = this.rightTotalImageCount;
        this.rightImgDialog = false;
        this.rightCurrentImage = "";
        this.imgDialog = true;
        let dom: HTMLElement = document.querySelector(".img-dialog");
        this.$nextTick(() => {
          dom.focus();
        });
      }
    }
  }
  metaStatusChange(val): void {
    localStorage.setItem("lux-filter-meta-status", val);
    this.getLeftData();
  }

  autoSelectChange(val): void {
    if (!val) {
      localStorage.setItem("lux-filter-auto-select", "0");
    } else {
      localStorage.setItem("lux-filter-auto-select", "1");
    }
  }

  dialogBrandChange(val, model): void {
    if (val) {
      this.currentRow.model = null;
      let brand = this.brandsArr.find(item => item.id === val);
      if (brand) {
        this.dialogModels = brand.models;
      }
      if (model) {
        this.currentRow.model = model;
      }
    } else {
      this.dialogModels = [];
      this.currentRow.model = null;
    }
  }

  leftBrandChange(val): void {
    if (val) {
      this.leftParams.models = null;
      let brand = this.brandsArr.find(item => item.id === val);
      if (brand) {
        this.leftModels = brand.models.filter(item => {
          return item.status === 1;
        });
      }
    } else {
      this.leftModels = [];
      this.leftParams.models = null;
    }
  }

  rightBrandChange(val): void {
    if (val) {
      this.rightParams.models = null;
      let brand = this.brandsArr.find(item => item.id === val);
      if (brand) {
        this.rightModels = brand.models.filter(item => {
          return item.status === 0;
        });
      }
    } else {
      this.rightModels = [];
      this.rightParams.models = null;
    }
  }
  getLeftSelectData(): void {}
  getRightSelectData(): void {
    this.$http.post("goods_attr").then(res => {
      this.brandsArr = res.brand;
      this.colorsArr = res.color;
      this.rightMaterials = res.material;
      this.rightTypes = res.type;
      let subcolors = [];
      let submaterials = [];
      for (let i of this.colorsArr) {
        subcolors = subcolors.concat(i.colors);
      }
      for (let i of this.rightMaterials) {
        submaterials = submaterials.concat(i.materials);
      }
      this.rightAllSubColors = subcolors;
      this.rightAllSubMaterials = submaterials;
    });
  }
  rightMaterialChange(val): void {
    let submaterials = this.rightParams.submaterials;
    let subAll = [];
    this.rightSubMaterials = this.rightMaterials.filter(item =>
      val.includes(item.id)
    );
    for (let i of this.rightSubMaterials) {
      subAll = subAll.concat(i.materials);
    }
    subAll = subAll.map(item => item.id);
    this.rightParams.submaterials = submaterials.filter(item =>
      subAll.includes(item)
    );
  }
  rightColorChange(val): void {
    let subcolors = this.rightParams.subcolors;
    let subAll = [];
    this.rightSubColors = this.colorsArr.filter(item => val.includes(item.id));
    for (let i of this.rightSubColors) {
      subAll = subAll.concat(i.colors);
    }
    subAll = subAll.map(item => item.id);
    this.rightParams.subcolors = subcolors.filter(item =>
      subAll.includes(item)
    );
  }
  rightMaterialParent(val): void {
    let materials = new Set();
    let item;
    for (let i of val) {
      item = this.rightAllSubMaterials.find(item => item.id == i);
      if (item) {
        materials.add(item.parent_material_id);
      }
    }
    this.rightParams.materials = [...materials];
    this.rightMaterialChange([...materials]);
  }
  rightColorParent(val): void {
    let colors = new Set();
    let item;
    for (let i of val) {
      item = this.rightAllSubColors.find(item => item.id == i);
      if (item) {
        colors.add(item.parent_color_id);
      }
    }
    this.rightParams.colors = [...colors];
    this.rightColorChange([...colors]);
  }
  handleCurrentChange(currentRow, oldRow) {
    this.current = currentRow;
  }
  singleSearch(row): void {
    this.leftData.forEach(item => (item.checked = false));
    row.checked = true;
    this.rightPage.page = 1;
    this.resetRightParams();
    this.title = row.title;
    this.rightParams.brands = row.brand_id;
    this.rightBrandChange(row.brand_id);
    this.getRightData();
  }
  search(val): void {
    if (val === "new") {
      this.leftPage.page = 1;
      this.getLeftData();
    } else {
      this.rightPage.page = 1;
      this.getRightData();
    }
  }
  getLeftData(): void {
    this.newLoading = true;
    let filter: Filter = {
      brands: this.leftParams.brands,
      colors: this.leftParams.colors,
      models: this.leftParams.models,
      keyword: this.leftParams.keyword
    };
    this.$http
      .post("goods_meta", {
        page: this.leftPage.page,
        per_page: this.leftPage.pageSize,
        status: this.metaStatus,
        filter: filter
      })
      .then(res => {
        this.newLoading = false;
        res.data.forEach(item => {
          item.checked = false;
          item.imgs = [];
          for (let i = 1; i < item.img_count; i++) {
            item.imgs.push({
              img: this.imgUrl + item.product_id + "/" + i + ".jpg",
              show: true
            });
          }
        });
        if (this.autoSelect && res.data.length) {
          this.singleSearch(res.data[0]);
        }
        this.leftData = res.data;
        this.leftPage.pageSize = res.per_page;
        this.leftPage.total = res.total;
        if (this.leftImgDialog) {
          this.imageClick(this.leftData[0], 0, null, "left");
        }
        this.$nextTick(() => {
          const leftTable: HTMLElement = document.querySelector(
            ".left .el-table"
          );
          if (leftTable) {
            leftTable.scrollTop = 0;
          }
        });
      });
  }
  getRightData(): void {
    this.rightLoading = true;
    let materials = [];
    let colors = [];
    if (this.rightParams.submaterials.length) {
      materials = this.rightParams.submaterials;
    } else if (this.rightSubMaterials.length) {
      for (let i of this.rightSubMaterials) {
        materials = materials.concat(i.materials);
      }
      materials = materials.map(item => item.id);
    }
    if (this.rightParams.subcolors.length) {
      colors = this.rightParams.subcolors;
    } else if (this.rightSubColors.length) {
      colors = [];
      for (let i of this.rightSubColors) {
        colors = colors.concat(i.colors);
      }
      colors = colors.map(item => item.id);
    }
    let filter: Filter = {
      materials: materials,
      colors: colors,
      brands: this.rightParams.brands,
      models: this.rightParams.models,
      types: this.rightParams.types,
      keyword: this.rightParams.keyword
    };
    let params = {
      per_page: this.rightPage.pageSize,
      page: this.rightPage.page,
      title: this.title,
      filter: filter
    };
    this.$http.post("goods_filter", params).then(res => {
      this.rightLoading = false;
      res.data.data.forEach(item => {
        item.checked = false;
        item.imgs = [];
        for (let i = 1; i < item.img_count; i++) {
          item.imgs.push({
            img: this.rightImgUrl + item.product_id + "/" + i + ".jpg",
            show: true
          });
        }
      });
      this.rightData = res.data.data;
      this.rightPage.pageSize = +res.data.per_page;
      this.rightPage.total = res.data.total;
      let resFilter: Filter = res.filter;
      for (let i in resFilter) {
        let val = resFilter[i];
        if (val) {
          switch (i) {
            case "brands":
              this.rightBrandChange(val);
              this.rightParams.brands = +val;
              break;
            case "colors":
              this.rightColorParent(val);
              this.rightParams.subcolors = val.map(item => +item);
              break;
            case "materials":
              this.rightMaterialParent(val);
              this.rightParams.submaterials = val.map(item => +item);
              break;
            case "types":
              this.rightParams.types = val.map(item => +item);
              break;
            default:
              this.rightParams[i] = +val;
          }
        }
      }
      if (this.rightImgDialog) {
        this.imageClick(this.rightData[0], 0, null, "right");
      }
      this.$nextTick(() => {
        const rightTable: HTMLElement = document.querySelector(
          ".right .el-table"
        );
        if (rightTable) {
          rightTable.scrollTop = 0;
        }
      });
      this.title = "";
    });
  }
  leftSizeChange(): void {
    this.getLeftData();
  }
  rightSizeChange(): void {
    this.getRightData();
  }
  leftCurrentChange(val): void {
    this.leftPage.page = val;
    this.getLeftData();
  }
  rightCurrentChange(val): void {
    this.rightPage.page = val;
    this.getRightData();
  }
  clearRemain(): void {
    let newArr = this.leftData.map(item => item.id);
    this.byPass(newArr);
  }

  deleteLeftData(id, index): void {
    this.$confirm("此操作将删除商品信息, 是否继续?", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.$http.post("goods/delete/" + id).then(
          res => {
            this.leftData.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          },
          err => {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        );
      })
      .catch(() => {});
  }
  editData(row, index, pos, title = "修改", id): void {
    this.dialogTitle = title;
    this.editIndex = index;
    this.editPos = pos;
    this.changeDialogVisible = true;
    this.currentRowCache = row;
    this.currentRowCache = {
      brand: row.brand_id,
      model: row.model_id,
      color: row.color.id,
      type: row.type_id,
      material: row.material_id,
      id: id ? id : row.id
    };
    this.currentRow = Object.assign({}, this.currentRowCache);
    this.dialogBrandChange(row.brand_id, row.model_id);
  }
  coverToLeft(row): void {
    const coverItem = this.leftData.find(item => {
      return item.checked === true;
    });
    const coverIndex = this.leftData.findIndex(item => {
      return item.checked === true;
    });

    this.editData(row, coverIndex, "left", "覆盖", coverItem.id);
  }
  // changeDialog
  cancelEdit(): void {
    this.currentRow = this.currentRowCache;
    this.changeDialogVisible = false;
  }
  remainEdit(): void {
    this.$http.post("goods_classify", this.currentRow).then(res => {
      this.$message({
        type: "success",
        message: "修改成功!"
      });
      let data = this.editPos === "right" ? this.rightData : this.leftData;
      let row = data[this.editIndex];
      if (this.editPos === "left") {
        this.leftData.splice(this.editIndex, 1);
      } else {
        row = res;
      }
      this.changeDialogVisible = false;
    });
  }
  combine(row): void {
    this.confirmCombine(row.goods_info_id);
  }
  confirmCombine(id): void {
    this.$confirm("此操作将合并商品信息, 是否继续?", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        let newArr = this.leftData
          .filter(item => item.checked)
          .map(item => item.id);
        let len = newArr.length;
        this.$http
          .post("goods_classify", {
            meta_ids: newArr,
            goods_info_id: id,
            user: this.user
          })
          .then(
            res => {
              this.leftData = this.leftData.filter(item => !item.checked);
              if (!this.leftData.length) {
                this.getLeftData();
              }
              this.combineNum += len;
              localStorage.setItem(this.combineMsg, this.combineNum.toString()); // 缓存计数
              this.rightData = [];
              this.resetRightParams();
              this.imgDialog = false;
              this.leftImgDialog = false;
              this.rightImgDialog = false;
              if (this.autoSelect && this.leftData.length) {
                this.singleSearch(this.leftData[0]);
              }
              this.$message({
                type: "success",
                message: "合并成功!"
              });
            },
            err => {
              this.$message({
                type: "error",
                message: "合并失败!"
              });
            }
          );
      })
      .catch(() => {});
  }
  resetRightParams(): void {
    for (let i in this.rightParams) {
      if (this.rightParams[i] instanceof Array) {
        this.rightParams[i].splice(0);
      } else {
        this.rightParams[i] = "";
      }
    }
    this.rightSubColors = [];
    this.rightSubMaterials = [];
  }
  handleClose(): void {}
  // setDilaog

  // imageDialog Zone
  pageUp(position) {
    if (position === "left") {
      if (this.leftPage.page > 1) {
        this.leftPage.page--;
        this.getLeftData();
      }
    } else if (position === "right") {
      if (this.rightPage.page > 1) {
        this.rightPage.page--;
        this.getRightData();
      }
    }
  }

  pageDown(position) {
    if (position === "left") {
      if (this.leftPage.page < this.leftData.length - 1) {
        this.leftPage.page++;
        this.getLeftData();
      }
    } else if (position === "right") {
      if (this.rightPage.page < this.rightData.length - 1) {
        this.rightPage.page++;
        this.getRightData();
      }
    }
  }

  imgDialogKeyUp(val, position = ""): void {
    switch (val.keyCode) {
      case 33:
        this.pageUp(position);
        break;
      case 34:
        this.pageDown(position);
        break;
      case 27:
        this.imgDialogEsc(position);
        break;
      case 37:
        this.previousImage(position);
        break;
      case 39:
        this.nextImage(position);
        break;
      case 38:
        this.previousProduct(position);
        break;
      case 40:
        this.nextProduct(position);
        break;
    }
  }

  pageKeyUp(event: any, position) {
    switch (event.keyCode) {
      case 33:
        this.pageUp(position);
        break;
      case 34:
        this.pageDown(position);
        break;
    }
  }

  imgDialogEsc(position = ""): void {
    if (!position) {
      this.imgDialog = false;
    } else if (position === "left") {
      this.leftImgDialog = false;
    } else if (position === "right") {
      this.rightImgDialog = false;
    }
  }
  imageClick(row, index, event: any, position): void {
    if (!this.halfMode) {
      this.totalImage = row.imgs;
      this.totalImageCount = this.totalImage.length;
      if (event) {
        this.currentImageIndex = +event.target.getAttribute("index") + 1;
      } else {
        this.currentImageIndex = 1;
      }
      this.currentImage = this.totalImage[this.currentImageIndex - 1].img;
      this.imgDialog = true;
      let dom: HTMLElement = document.querySelector(".img-dialog");
      this.$nextTick(() => {
        dom.focus();
      });
    } else {
      if (position === "left") {
        this.leftIndex = index;
        this.leftTotalImage = row.imgs;
        this.leftTotalImageCount = this.leftTotalImage.length;
        if (event) {
          this.leftCurrentImageIndex = +event.target.getAttribute("index") + 1;
        } else {
          this.leftCurrentImageIndex = 1;
        }
        this.leftCurrentImage = this.leftTotalImage[
          this.leftCurrentImageIndex - 1
        ].img;
        this.leftImgDialog = true;
        let dom: HTMLElement = document.querySelector(".left-img-dialog");
        this.$nextTick(() => {
          dom.focus();
        });
      } else {
        this.rightIndex = index;
        this.rightTotalImage = row.imgs;
        this.rightTotalImageCount = this.rightTotalImage.length;
        if (event) {
          this.rightCurrentImageIndex = +event.target.getAttribute("index") + 1;
        } else {
          this.rightCurrentImageIndex = 1;
        }
        this.rightCurrentImage = this.rightTotalImage[
          this.rightCurrentImageIndex - 1
        ].img;
        this.rightImgDialog = true;
        let dom: HTMLElement = document.querySelector(".right-img-dialog");
        this.$nextTick(() => {
          dom.focus();
        });
      }
    }
  }

  mouseoverDom(position): void {
    let dialogShow =
      this.leftImgDialog || this.rightImgDialog || this.imgDialog;
    if (position === "leftImage") {
      let dom: HTMLElement = document.querySelector(".left-img-dialog");
      dom.focus();
    } else if (position === "rightImage") {
      let dom: HTMLElement = document.querySelector(".right-img-dialog");
      dom.focus();
    } else if (position === "left" && !dialogShow) {
      let dom: HTMLElement = document.querySelector(".left");
      dom.focus();
    } else if (position === "right" && !dialogShow) {
      let dom: HTMLElement = document.querySelector(".right");
      dom.focus();
    }
  }
  mousewheel(val, position = ""): void {
    if (this.leftImgDialog || this.rightImgDialog || this.imgDialog) {
      if (this.mouseLock) {
        this.mouseLock = false;
        let wheelDelta = val.wheelDelta;
        if (wheelDelta > 0) {
          this.previousImage(position);
        } else {
          this.nextImage(position);
        }
        setTimeout(() => {
          this.mouseLock = true;
        }, 100);
      }
    }
  }

  previousProduct(position = ""): void {
    if (position === "left") {
      if (this.leftIndex > 0) {
        this.leftIndex--;
        this.imageClick(
          this.leftData[this.leftIndex],
          this.leftIndex,
          null,
          position
        );
        (this.$refs.leftTable as any).setCurrentRow(
          this.leftData[this.leftIndex]
        );
      }
    } else if (position === "right") {
      if (this.rightIndex > 0) {
        this.rightIndex--;
        this.imageClick(
          this.rightData[this.rightIndex],
          this.rightIndex,
          null,
          position
        );
      }
      (this.$refs.rightTable as any).setCurrentRow(
        this.rightData[this.rightIndex]
      );
    }
  }

  nextProduct(position = ""): void {
    if (position === "left") {
      if (this.leftIndex < this.leftData.length - 1) {
        this.leftIndex++;
        this.imageClick(
          this.leftData[this.leftIndex],
          this.leftIndex,
          null,
          position
        );
      }
      (this.$refs.leftTable as any).setCurrentRow(
        this.leftData[this.leftIndex]
      );
    } else if (position === "right") {
      if (this.rightIndex < this.rightData.length - 1) {
        this.rightIndex++;
        this.imageClick(
          this.rightData[this.rightIndex],
          this.rightIndex,
          null,
          position
        );
      }
      (this.$refs.rightTable as any).setCurrentRow(
        this.rightData[this.rightIndex]
      );
    }
  }

  previousImage(position = ""): void {
    if (!this.halfMode) {
      if (this.currentImageIndex > 1) {
        this.currentImageIndex--;
      } else {
        this.currentImageIndex = this.totalImageCount;
      }
      this.currentImage = this.totalImage[this.currentImageIndex - 1].img;
    } else {
      if (position === "left") {
        if (this.leftCurrentImageIndex > 1) {
          this.leftCurrentImageIndex--;
        } else {
          this.leftCurrentImageIndex = this.leftTotalImageCount;
        }
        this.leftCurrentImage = this.leftTotalImage[
          this.leftCurrentImageIndex - 1
        ].img;
      } else if (position === "right") {
        if (this.rightCurrentImageIndex > 1) {
          this.rightCurrentImageIndex--;
        } else {
          this.rightCurrentImageIndex = this.rightTotalImageCount;
        }
        this.rightCurrentImage = this.rightTotalImage[
          this.rightCurrentImageIndex - 1
        ].img;
      }
    }
  }
  nextImage(position = ""): void {
    if (!this.halfMode) {
      if (this.currentImageIndex < this.totalImageCount) {
        this.currentImageIndex++;
      } else {
        this.currentImageIndex = 1;
      }
      this.currentImage = this.totalImage[this.currentImageIndex - 1].img;
    } else {
      if (position === "left") {
        if (this.leftCurrentImageIndex < this.leftTotalImageCount) {
          this.leftCurrentImageIndex++;
        } else {
          this.leftCurrentImageIndex = 1;
        }
        this.leftCurrentImage = this.leftTotalImage[
          this.leftCurrentImageIndex - 1
        ].img;
      } else if (position === "right") {
        if (this.rightCurrentImageIndex < this.rightTotalImageCount) {
          this.rightCurrentImageIndex++;
        } else {
          this.rightCurrentImageIndex = 1;
        }
        this.rightCurrentImage = this.rightTotalImage[
          this.rightCurrentImageIndex - 1
        ].img;
      }
    }
  }
}
</script>

<style  lang="scss">
#my-filter {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  .autoSelect {
    position: absolute;
    left: 10px;
    top: 10px;
  }

  .left {
    outline: none;
    position: relative;
    width: 50%;
    height: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    padding-bottom: 80px;
    padding-top: 90px;
    box-sizing: border-box;
    .search-form {
      height: 90px;
      overflow: hidden;
      margin-top: -90px;
      text-align: right;
      .el-row {
        margin-top: 30px;
        text-align: center;
      }
    }
    .el-table {
      height: 100%;
      overflow: auto;
    }
    .bottom-bar {
      height: 80px;
      overflow: hidden;
      margin-bottom: -80px;
    }
  }

  .right {
    outline: none;
    height: 100%;
    position: relative;
    width: 50%;
    padding-left: 5px;
    padding-top: 90px;
    padding-bottom: 80px;
    box-sizing: border-box;
    .search-form {
      height: 90px;
      overflow: hidden;
      margin-top: -90px;
    }
    .bottom-bar {
      height: 80px;
      overflow: hidden;
      margin-bottom: -80px;
      .msg {
        float: left;
        margin-top: 15px;
        margin-left: 10px;
      }
    }
    .el-table {
      height: 100%;
      overflow-y: auto;
    }
  }
  .demo-table-expand {
    text-align: left;
    text-indent: 10px;
  }
  td {
    .cell {
      color: #409eff !important;
    }
  }

  .el-form {
    margin-left: 10px;
  }

  .el-form-item__content {
    .el-input__inner {
      width: 150px;
    }
    .desc .el-input__inner,
    .type .el-input__inner {
      width: 175px;
    }
  }

  .img-dialog,
  .left-img-dialog,
  .right-img-dialog {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    .top-bar {
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      background-color: black;
      padding-left: 10px;
      padding-right: 10px;
      .right-button {
        float: right;
        cursor: pointer;
        &:hover {
          color: red;
        }
      }
    }
    .img {
      vertical-align: top;
      margin-top: 50px;
      text-align: center;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-30px);
        &:hover {
          color: red;
        }
        &.el-icon-arrow-left {
          left: 0;
        }
        &.el-icon-arrow-right {
          right: 0;
        }
      }
      .img {
        width: 40vw;
        height: 40vw;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }

  .buttons {
    float: left;
    margin-left: 5px;
    margin-top: 13px;
    .no-match {
      margin-right: 10px;
    }
    .el-switch {
      margin-right: 5px;
    }
  }

  .el-button + .el-button {
    margin-left: 3px;
  }

  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }

  .el-table td,
  .el-table th {
    padding: 6px 0;
  }

  .el-row {
    text-align: left;
  }

  .el-tag--mini {
    padding: 0;
  }

  .el-form-item {
    margin-bottom: 1px;
  }

  .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
  }

  .el-pagination {
    margin-top: 5px;
    text-align: right;
    margin-bottom: 5px;
  }

  .table-img-wrap {
    overflow: hidden;
    white-space: nowrap;
  }

  .cell {
    text-align: left;
    .img-wrap {
      margin-right: 5px;
      overflow: hidden;
      width: 70px;
      height: 70px;
      display: inline-block;
      img {
        width: 70px;
        height: 70px;
        cursor: zoom-in;
        position: relative;
        transition: transform 0.5s ease-out;
      }
    }
  }
  .el-dialog__body {
    padding: 20px 20px;
    .el-form-item__label {
      width: 80px;
      text-align: left;
    }
  }

  .set-dialog {
    .el-dialog__body {
      padding-left: 40px;
    }
    .el-row {
      height: 40px;
      padding-top: 10px;
      margin-top: 10px;
      text-align: left;
      .set-name {
        display: inline-block;
        width: 120px;
      }
      .radio-row {
      }
    }
  }

  .el-pagination__total {
    margin-top: 5px !important;
  }
  .el-pagination__jump {
    margin-right: 10px;
    margin-top: 5px;
  }
  .el-pagination {
    padding-top: 5px;
    .btn-prev,
    .btn-next {
      margin-top: 8px;
    }
  }
}
</style>
	